<template>
  <div>
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="bars" size="26" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.van-nav-bar {
  position: fixed;
  width: 100%;
  .van-nav-bar__content {
    .van-nav-bar__left {
      left: -12px;
      .van-icon {
        font-size: 24px;
        color: #555;
      }
    }
    .van-nav-bar__title {
      color: #555;
    }
    .van-nav-bar__right {
      .van-icon {
        color: #555;
      }
    }
  }
}
</style>
